@font-face {
    font-family: NBInternational;
    src: url("/assets/fonts/NB-International-LightWeb.eot");
    src: url("/assets/fonts/NB-International-LightWeb.eot?#iefix") format("embedded-opentype"), url("/assets/fonts/NB-International-LightWeb.woff") format("woff");
    font-weight: 300;
    font-style:normal
}

@font-face {
    font-family: NBInternational;
    src: url("/assets/fonts/NB-International-RegularWeb.eot");
    src: url("/assets/fonts/NB-International-RegularWeb.eot?#iefix") format("embedded-opentype"), url("/assets/fonts/NB-International-RegularWeb.woff") format("woff");
    font-weight: normal;
    font-style:normal
}

@font-face {
    font-family: "Neue Haas Grotesk Display";
    src: url("/assets/fonts/NeueHaasGrotDisp-55Roman-Web.woff") format("woff"), url("/assets/fonts/NeueHaasGrotDisp-55Roman-Web.woff2") format("woff2");
    font-weight: 400;
    font-style:normal
}

@font-face {
    font-family: "GT Super Text";
    src: url("/assets/fonts/GT-Super-Text-Book.woff") format("woff"), url("/assets/fonts/GT-Super-Text-Book.woff2") format("woff2");
    font-weight: 300;
    font-style:normal
}

@font-face {
    font-family: "GT Super Text";
    src: url("/assets/fonts/GT-Super-Text-Book-Italic.woff") format("woff"), url("/assets/fonts/GT-Super-Text-Book-Italic.woff2") format("woff2");
    font-weight: 300;
    font-style:italic
}

@font-face {
    font-family: "GT Super Text";
    src: url("/assets/fonts/GT-Super-Text-Medium.woff") format("woff"), url("/assets/fonts/GT-Super-Text-Medium.woff2") format("woff2");
    font-weight: 500;
    font-style:normal
}

html, body, div, span, applet, object, iframe, h1, .stats__title, .about__competencies h2, .about__competencies .carousel__text:not(.carousel__text--hidden), .about__competencies .work-card__description, .about .products h2, .about .products .carousel__text:not(.carousel__text--hidden), .about .products .work-card__description, .filter__title, h2, .carousel__text:not(.carousel__text--hidden), .work-card__description, h3, .about__competency__title, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align:baseline
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
    display:block
}

body {
    line-height:1
}

ol, ul {
    list-style:none
}

blockquote, q {
    quotes:none
}

blockquote:before, blockquote:after, q:before, q:after {
    content: '';
    content:none
}

table {
    border-collapse: collapse;
    border-spacing:0
}

html {
    font-size: 22px;
    overflow-x: hidden;
    --easeInExpo: cubic-bezier(0.95, 0.05, 0.795, 0.035);
    --easeOutExpo: cubic-bezier(0.19, 1, 0.22, 1);
    --easeInOutExpo: cubic-bezier(1, 0, 0, 1);
    --headerHeight: 3.6818181818rem;
    --siteMaxWidth: 68rem
}

@media only screen and (max-width: 720px) {
    html {
        font-size:20px
    }
}

body {
    font-size: 1rem;
    color: #fff;
    --background: #000;
    background-color: #000;
    font-family: "NBInternational", Helvetica, sans-serif;
    font-weight: 300;
    line-height: 1.2272727273;
    transition:background 400ms cubic-bezier(0.19, 1, 0.22, 1), color 400ms cubic-bezier(0.19, 1, 0.22, 1)
}

a {
    text-decoration: none;
    color:inherit
}

.container {
    max-width: var(--siteMaxWidth);
    margin-left: auto;
    margin-right: auto;
    padding-left: 1.2272727273rem;
    padding-right:1.2272727273rem
}

.row {
    margin-left: -.6136363636rem;
    margin-right: -.6136363636rem;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -moz-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap:wrap
}

.row--noflex {
    display:block
}

.row--noflex:before, .row--noflex:after {
    content: '';
    display:table
}

.row--noflex:after {
    clear:both
}

.col {
    float: left;
    box-sizing: border-box;
    padding-left: .6136363636rem;
    padding-right:.6136363636rem
}

.col--right {
    float:right
}

.col.full {
    width:100%
}

.col.stacked {
    position:relative
}

.col.stacked:before {
    content: '';
    position: absolute;
    top: calc(50% - 1.2272727273rem);
    border-top: .6136363636rem solid #000;
    border-bottom: .6136363636rem solid #000;
    width: 100%;
    z-index:0
}

.col.half, .col.stacked {
    width:50%
}

@media only screen and (max-width: 720px) {
    .col.half, .col.stacked {
        width:100%
    }
}

h1, .stats__title, .about__competencies h2, .about__competencies .carousel__text:not(.carousel__text--hidden), .about__competencies .work-card__description, .about .products h2, .about .products .carousel__text:not(.carousel__text--hidden), .about .products .work-card__description, .filter__title, h2, .carousel__text:not(.carousel__text--hidden), .work-card__description {
    margin-bottom:.8636363636rem
}

@media only screen and (min-width: 721px) {
    h1, .stats__title, .about__competencies h2, .about__competencies .carousel__text:not(.carousel__text--hidden), .about__competencies .work-card__description, .about .products h2, .about .products .carousel__text:not(.carousel__text--hidden), .about .products .work-card__description, .filter__title, h2, .carousel__text:not(.carousel__text--hidden), .work-card__description {
        text-rendering:optimizeLegibility
    }
}

@media only screen and (min-width: 721px) {
    h1, .stats__title, .about__competencies h2, .about__competencies .carousel__text:not(.carousel__text--hidden), .about__competencies .work-card__description, .about .products h2, .about .products .carousel__text:not(.carousel__text--hidden), .about .products .work-card__description, .filter__title {
        font-size: 1.3636363636rem;
        line-height:1.1666666667
    }
}

@media only screen and (min-width: 721px) {
    h2, .carousel__text:not(.carousel__text--hidden), .work-card__description {
        font-size: 1.3636363636rem;
        line-height:1.1666666667
    }
}

h3, .about__competency__title, h4, h5, h6, p, ol, ul, pre, blockquote {
    margin-bottom:1.2272727273rem
}

li p {
    margin-bottom:.8181818182rem
}

hr {
    border: 0;
    height: 1px;
    background-color: #292622;
    margin-top: 2.4545454545rem;
    margin-bottom:2.4545454545rem
}

code {
    background-color:#776b62
}

.bc {
    max-width: 30rem;
    padding-bottom:1rem
}

.bc ul {
    padding-left: 1rem;
    list-style-type:square
}

.bc ol {
    padding-left: 2rem;
    counter-reset:decimal-counter
}

.bc ol li:before {
    box-sizing: border-box;
    width: 1rem;
    margin-left: -1rem;
    position: absolute;
    color:var(--accent-color, #776b62)
}

.bc ol li:before {
    content: counter(decimal-counter, decimal-leading-zero);
    counter-increment: decimal-counter;
    width: 2rem;
    margin-left: -2rem;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select:none
}

.bc ul li::marker {
    color:var(--accent-color, #776b62)
}

.st, .contact__subsection.col p {
    color:#776b62
}

.st a:hover, .contact__subsection.col p a:hover {
    color: #fff;
    border-bottom-color:#fff
}

.underline, .hero__subtitles a, .bc a, .st a, .contact__subsection.col p a, .underline-wrap a, .footer__links a, .work__info__section a, .work__info__team a, .work__info__tags a, a.hover:hover, .contact__subsection.col h4 a, .job__aside__other__link--active {
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-bottom-color: #fff;
    -webkit-transition: all 150ms;
    -o-transition: all 150ms;
    transition:all 150ms
}

.underline--gray-light, .st a, .contact__subsection.col p a, .underline-wrap--gray-light a, .work__info__team a, .work__info__tags a {
    border-bottom-color:#776b62
}


html.is-animating .transition-fade {
    opacity:0
}

.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: #000;
    background-color: var(--background);
    z-index: 999;
    height: var(--headerHeight);
    transition:background 400ms cubic-bezier(0.19, 1, 0.22, 1)
}

body:not(.is-modal-open).is-story-header-visible .header {
    background: transparent;
    color:#fff
}

body:not(.is-modal-open).is-story-header-visible .header .header__link:hover, body:not(.is-modal-open).is-story-header-visible .header .header__link:focus-within {
    color:inherit
}

body:not(.is-modal-open).is-story-header-visible .header .header__link:not(.header__link--active) {
    color:rgba(255, 255, 255, 0.6)
}

body:not(.is-modal-open).is-story-header-visible .header .header__link:not(.header__link--active):hover, body:not(.is-modal-open).is-story-header-visible .header .header__link:not(.header__link--active):focus-within {
    color:#fff
}

.header__inner {
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform:translateY(-50%)
}

.header__nav {
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    -moz-align-items: center;
    align-items:center
}

.header__nav.row {
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    -webkit-justify-content: space-between;
    -moz-justify-content: space-between;
    justify-content: space-between;
    -webkit-flex-wrap: nowrap;
    -moz-flex-wrap: nowrap;
    -ms-flex-wrap: none;
    flex-wrap:nowrap
}

.header__logo {
    padding-top: 2px;
    padding-bottom:2px
}

.header__logo svg {
    fill: currentColor;
    overflow: visible;
    display: block;
    width:6rem
}

.header__logo svg {
    width: 100px;
    height: 100px;
  }

.header__items {
    text-align:right
}

.header__item {
    display: inline-block;
    margin-right:2rem
}

@media only screen and (max-width: 720px) {
    .header__item:not(.header__item--toggle) {
        display:none
    }
}

.header__item:last-of-type {
    margin-right:0
}

.header__item--toggle {
    margin-right: 0;
    display:none
}

@media only screen and (max-width: 720px) {
    .header__item--toggle {
        display:block
    }
}

.header__link {
    -webkit-transition: color 150ms;
    -o-transition: color 150ms;
    transition:color 150ms
}

.header__link:hover, .header__link:focus-within {
    color:#fff
}

body.index .header__link {
    color:inherit
}

body.index .header__link {
    color:inherit
}

.header__link:not(.header__link--active) {
    color:#776b62
}

.header__link:not(.header__link--active):hover, .header__link:not(.header__link--active):focus-within {
    color:#fff
}

.modal-toggle {
    cursor: pointer;
    padding: .5rem;
    position: relative;
    right: -.5rem;
    top:-1px
}

.is-modal-open, .is-work-info-open {
    overflow:hidden
}

.modal {
    background-color: #000;
    position: fixed;
    visibility: hidden;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    opacity: 0;
    z-index: 888;
    -webkit-transition: opacity 250ms ease-in-out, visibility 250ms ease-in-out;
    -o-transition: opacity 250ms ease-in-out, visibility 250ms ease-in-out;
    transition: opacity 250ms ease-in-out, visibility 250ms ease-in-out;
}

.stories .modal, .story .modal {
    background-color:#f5f6f0
}

.modal .container {
    display: block;
    margin-top:var(--headerHeight);
    padding-top: 2rem;
    -webkit-transition: opacity 250ms ease-in-out, transform 250ms ease-in-out;
    -o-transition: opacity 250ms ease-in-out, transform 250ms ease-in-out;
    transition: opacity 250ms ease-in-out, transform 250ms ease-in-out;
    opacity: 0;
    transform: translateY(-10px);
}

.is-modal-open .modal .container {
    opacity: 1;
    transform: translateY(0);
}

@media only screen and (max-width: 720px) {
    .is-modal-open .modal {
        visibility: visible;
        opacity: 1;
        overflow:auto
    }
}

.modal__items {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    text-align: left;
    font-size: 1.5em;
    font-weight: 300;
    width:100%;
    padding: 1rem 0;
    -webkit-transition: opacity 300ms ease-in-out;
    -o-transition: opacity 300ms ease-in-out;
    transition: opacity 300ms ease-in-out;
}

.modal__item {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    -webkit-justify-content: flex-start;
    -moz-justify-content: flex-start;
    justify-content: flex-start;
    -webkit-box-direction: normal;
    -webkit-box-orient: vertical;
    -webkit-flex-direction: column;
    -moz-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    width:100%;
    padding: 0.5rem 0;
}

.modal__link {
    display:block
}

.hamburger {
    width: 20px;
    height: 20px;
    position:relative
}

.hamburger span {
    display: block;
    position: absolute;
    height: 2px;
    width: 100%;
    background-color: currentColor;
    left: 0;
    -webkit-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: 150ms;
    -o-transition: 150ms;
    transition: 150ms;
    -webkit-transform-origin: left center;
    -moz-transform-origin: left center;
    -o-transform-origin: left center;
    transform-origin:left center
}

.hamburger span:nth-child(1) {
    top:4px
}

.hamburger span:nth-child(2) {
    top:13px
}

.is-modal-open .hamburger span:nth-child(1) {
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
    top: 2px;
    left:3px
}

.is-modal-open .hamburger span:nth-child(2) {
    -webkit-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
    top: 16px;
    left:3px
}

.modal__footer {
    margin-bottom:1.8409090909rem
}

.footer {
    padding-top: 2.4545454545rem;
    margin-bottom: 1.8409090909rem;
    border-top:1px solid #292622
}

.footer:before, .footer:after {
    content: '';
    display:table
}

.footer:after {
    clear:both
}

body.index.is-scrolled-down .footer {
    position: sticky;
    bottom: 0;
    background:#000
}

body.index.is-scrolled-down:not(.is-scrolled-bottom) .footer {
    padding-top:1.2272727273rem
}

@media only screen and (min-width: 721px) {
    .footer__text {
        float:left
    }

    .footer__text p {
        display:inline-block
    }
}

@media only screen and (min-width: 721px) {
    .footer__links {
        float: right;
        text-align:right
    }
}

@media only screen and (min-width: 881px) {
    .footer__links br {
        display:none
    }

    .footer__links br + a {
        margin-left:4rem
    }
}

.main {
    padding-top: 2.3rem;
    margin-top: 0;
    margin-bottom:4.9090909091rem
}

@media only screen and (max-width: 720px) {
    .main {
        padding-top:1.2272727273rem
    }
}

body.index .main {
    padding-top:0
}

body.contact .main {
    margin-bottom:.6136363636rem
}

body.works .main {
    margin-top:-.1840909091rem
}

@media only screen and (max-width: 720px) {
    body.works .main {
        margin-top:0
    }
}

body.about .main {
    --accent-color: #FF800C;
    margin-top: 7.3636363636rem;
    margin-bottom:7.3636363636rem
}

@media only screen and (min-width: 2001px) {
    body.about .main {
        margin-top:9.8181818182rem
    }
}

@media only screen and (max-width: 720px) {
    body.about .main {
        margin-top: 2.4545454545rem;
        margin-bottom:2.4545454545rem
    }
}

@media only screen and (max-width: 720px) {
    body.jobs .main {
        margin-bottom:3.6818181818rem
    }
}

body.job .main {
    margin-bottom:3.6818181818rem
}

.hero {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height:calc(100vh - var(--headerHeight))
}

.hero__main-text {
    font-style: normal;
    margin-top: 7rem;
    font-weight: 300;
    font-size: 2.8181818182rem;
    line-height: 1;
    letter-spacing: -0.035em;
    display: grid;
    font-size: 2rem;
    margin-block-end:4rem
}

@media only screen and (min-width: 641px) {
    .hero__main-text {
        font-size:2.8181818182rem
    }
}

@media only screen and (min-width: 1081px) {
    .hero__main-text {
        font-style: normal;
        font-weight: 300;
        font-size: 4.0909090909rem;
        line-height: 1;
        letter-spacing: -0.045em;
        max-width:25ch
    }
}

@media only screen and (min-width: 1081px) {
    .hero__subtitles-wrapper {
        display: grid;
        gap: 1rem;
        grid-template-columns:1fr 1fr
    }
}

@media only screen and (min-width: 1081px) {
    .hero__subtitles {
        display: grid;
        gap: 1rem;
        grid-column: 2;
        grid-template-columns:1fr 1fr
    }
}

.hero__subtitles p {
    margin-block-end:0.5rem
}

.feed-item {
    margin-bottom: 2.4545454545rem;
    width:100%
}

@media only screen and (min-width: 721px) {
    .feed-item {
        width:50%
    }
}

@media only screen and (min-width: 1081px) {
    .feed-item {
        width:33.3333333333%
    }
}

@media only screen and (min-width: 721px) {
    .feed-item--active {
        width:100%
    }
}

@media only screen and (min-width: 1081px) {
    .feed-item--active {
        width:66.6666666667%
    }
}

.feed-item__image {
    width: 100%;
    margin-bottom: 1.2272727273rem;
    cursor:pointer
}

.is-video .feed-item__image + .fluid-width-video-wrapper {
    display:none
}

body.is-touch .is-video .feed-item__image {
    display:none
}

body.is-touch .is-video .feed-item__image + .fluid-width-video-wrapper {
    display:block
}

.is-video-shown .feed-item__image {
    display:none
}

.is-video-shown .feed-item__image + .fluid-width-video-wrapper {
    display:block
}

.feed-footer {
    visibility:hidden
}

.lazy-loader {
    text-align:center
}

.up-wrap {
    position: -webkit-sticky;
    position: sticky;
    bottom: 1rem;
    z-index: 3;
    display: none;
    pointer-events: none;
    -webkit-transition: transform 300ms, opacity 150ms;
    -o-transition: transform 300ms, opacity 150ms;
    transition: transform 300ms, opacity 150ms;
    -webkit-transform: translateY(300%);
    -ms-transform: translateY(300%);
    -o-transform: translateY(300%);
    transform: translateY(300%);
    opacity:0
}

body.index .up-wrap {
    bottom:0rem
}

.is-js .up-wrap {
    display: flex;
    align-items: flex-end;
    justify-content:flex-end
}

.is-scrolled-down .up-wrap {
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0);
    opacity:1
}

.up {
    display: block;
    cursor: pointer;
    color: #000;
    background-color: #fff;
    height: 3.6363636364rem;
    width: 3.6363636364rem;
    text-align: center;
    line-height: 3.6363636364rem;
    border-radius: 50%;
    overflow: hidden;
    pointer-events: auto;
    -webkit-transition: -webkit-transform 0;
    -moz-transition: -moz-transform 0;
    -o-transition: -o-transform 0;
    transition:transform 0
}

.up span {
    display: block;
    -webkit-animation: spin 1s linear infinite;
    -o-animation: spin 1s linear infinite;
    animation: spin 1s linear infinite;
    -webkit-transform: rotate(0);
    -ms-transform: rotate(0);
    -o-transform: rotate(0);
    transform: rotate(0);
    -webkit-animation-play-state: paused;
    -o-animation-play-state: paused;
    animation-play-state:paused
}

.up:hover span {
    -webkit-animation-play-state: running;
    -o-animation-play-state: running;
    animation-play-state:running
}

@-webkit-keyframes spin {
    from {
        -webkit-transform: rotate(0);
        -ms-transform: rotate(0);
        -o-transform: rotate(0);
        transform:rotate(0)
    }

    to {
        -webkit-transform: rotate(-360deg);
        -ms-transform: rotate(-360deg);
        -o-transform: rotate(-360deg);
        transform:rotate(-360deg)
    }
}

@-moz-keyframes spin {
    from {
        -webkit-transform: rotate(0);
        -ms-transform: rotate(0);
        -o-transform: rotate(0);
        transform:rotate(0)
    }

    to {
        -webkit-transform: rotate(-360deg);
        -ms-transform: rotate(-360deg);
        -o-transform: rotate(-360deg);
        transform:rotate(-360deg)
    }
}

@-ms-keyframes spin {
    from {
        -webkit-transform: rotate(0);
        -ms-transform: rotate(0);
        -o-transform: rotate(0);
        transform:rotate(0)
    }

    to {
        -webkit-transform: rotate(-360deg);
        -ms-transform: rotate(-360deg);
        -o-transform: rotate(-360deg);
        transform:rotate(-360deg)
    }
}

@-o-keyframes spin {
    from {
        -webkit-transform: rotate(0);
        -ms-transform: rotate(0);
        -o-transform: rotate(0);
        transform:rotate(0)
    }

    to {
        -webkit-transform: rotate(-360deg);
        -ms-transform: rotate(-360deg);
        -o-transform: rotate(-360deg);
        transform:rotate(-360deg)
    }
}

@keyframes spin {
    from {
        -webkit-transform: rotate(0);
        -ms-transform: rotate(0);
        -o-transform: rotate(0);
        transform:rotate(0)
    }

    to {
        -webkit-transform: rotate(-360deg);
        -ms-transform: rotate(-360deg);
        -o-transform: rotate(-360deg);
        transform:rotate(-360deg)
    }
}

@keyframes highlight-fade-in {
    0% {
        color:#000
    }
}

@-webkit-keyframes slide-up {
    from {
        margin-top:2rem
    }

    to {
        margin-top:0
    }
}

@-moz-keyframes slide-up {
    from {
        margin-top:2rem
    }

    to {
        margin-top:0
    }
}

@-ms-keyframes slide-up {
    from {
        margin-top:2rem
    }

    to {
        margin-top:0
    }
}

@-o-keyframes slide-up {
    from {
        margin-top:2rem
    }

    to {
        margin-top:0
    }
}

@keyframes slide-up {
    from {
        margin-top:2rem
    }

    to {
        margin-top:0
    }
}

body.about .main {
    margin-top: 0;
    padding-top:0
}

.about__hero {
    --spacing: 40vh;
    height: calc(130vh - var(--headerHeight));
    position: relative;
    border:1px solid #000
}

@media only screen and (min-width: 1081px) {
    .about__hero {
        height:calc(150vh - var(--headerHeight))
    }
}

.about__hero h2, .about__hero .carousel__text:not(.carousel__text--hidden), .about__hero .work-card__description {
    font-style: normal;
    font-weight: 300;
    font-size: 2.8181818182rem;
    line-height: 1;
    letter-spacing: -0.035em;
    display: flex;
    justify-content: center;
    text-align: center;
    width: calc(100% -(4 * 1.2272727273rem));
    position: sticky;
    top: 35%;
    margin-bottom: var(--spacing);
    min-width:100%
}

@media only screen and (min-width: 1081px) {
    .about__hero h2, .about__hero .carousel__text:not(.carousel__text--hidden), .about__hero .work-card__description {
        font-style: normal;
        font-weight: 300;
        font-size: 4.0909090909rem;
        line-height: 1;
        letter-spacing:-0.045em
    }
}

.about__hero h2 span, .about__hero .carousel__text:not(.carousel__text--hidden) span, .about__hero .work-card__description span {
    display: block;
    position: absolute;
    width: 100%;
    max-width:20ch
}

.about__hero h2 span:nth-child(1), .about__hero .carousel__text:not(.carousel__text--hidden) span:nth-child(1), .about__hero .work-card__description span:nth-child(1) {
    background: #000;
    z-index:1
}

.about__hero h2 span:nth-child(2), .about__hero .carousel__text:not(.carousel__text--hidden) span:nth-child(2), .about__hero .work-card__description span:nth-child(2) {
    opacity:0
}

.about [data-animation-trigger] {
    opacity: 0;
    pointer-events: none;
    position: absolute;
    width: 100px;
    z-index: 2000
}

.about [data-animation-trigger='control-block-1'] {
    top: 0;
    height:30vh
}

@media only screen and (min-width: 1081px) {
    .about [data-animation-trigger='control-block-1'] {
        height: 40vh
    }
}

.about [data-animation-trigger='control-block-2'] {
    top: 30vh;
    height:30vh
}

@media only screen and (min-width: 1081px) {
    .about [data-animation-trigger='control-block-2'] {
        top: 40vh;
        height: 40vh
    }
}

.about [data-animation-trigger='control-content'] {
    top: 0;
    height:calc(var(--spacing) + 2px)
}

.about[data-debug] [data-animation-trigger] {
    background: lightcoral;
    opacity: 0.8;
    border:1px solid white
}

.about .content {
    opacity: 0;
    transition:opacity 0.5s ease-in
}

@media only screen and (min-width: 1081px) {
    .about .content {
        max-width:32ch
    }
}

.about .products h2, .about .products .carousel__text:not(.carousel__text--hidden), .about .products .work-card__description {
    margin-block:5rem 2rem
}

@media only screen and (min-width: 1081px) {
    .about .products h2, .about .products .carousel__text:not(.carousel__text--hidden), .about .products .work-card__description {
        font-style: normal;
        font-weight: 300;
        font-size: 2.8181818182rem;
        line-height: 1;
        letter-spacing: -0.035em;
        margin-block: 7rem 4.5rem;
        max-width:32ch
    }
}

.about .products__cards {
    display: grid;
    gap:1rem
}

@media only screen and (min-width: 641px) {
    .about .products__cards {
        grid-template-columns:repeat(2, 1fr)
    }
}

@media only screen and (min-width: 1081px) {
    .about .products__cards {
        grid-template-columns:repeat(3, 1fr)
    }
}

.about .products__cards .card {
    background: #0D0D0D;
    border: 2px solid #0D0D0D;
    cursor: pointer;
    display: grid;
    grid-template-columns: 3rem 1fr;
    align-items: center;
    gap: 2rem;
    transition:border 150ms
}

@media only screen and (min-width: 1081px) {
    .about .products__cards .card {
        grid-template-columns:4rem 1fr
    }
}

.about .products__cards .card:hover {
    border:2px solid #fff
}

.about .products__cards .card:hover .card__icon {
    opacity:1
}

.about .products__cards .card__name {
    margin: 0;
    padding:1.2272727273rem
}

.about .products__cards .card__icon {
    width: 100%;
    height: 100%;
    max-width: none;
    opacity:0
}

.about .products__cards .card__icon__wrapper {
    width: calc(100px + 1.2272727273rem);
    height: calc(100px + 1.2272727273rem);
    mix-blend-mode: screen;
    background-repeat: no-repeat;
    background-position: top left;
    background-size:contain
}

.about .products .card-modal:not(.hidden) {
    background: #0D0D0D;
    display: grid;
    grid-template-columns: 1fr auto;
    padding: 2.4545454545rem;
    padding-top: 0;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index:1000
}

@media only screen and (min-width: 641px) {
    .about .products .card-modal:not(.hidden) {
        top: 5vh;
        margin-inline:10vw
    }
}

@media only screen and (min-width: 1081px) {
    .about .products .card-modal:not(.hidden) {
        top: 10vh;
        margin-inline:25vw
    }
}

.about .products .card-modal__backdrop {
    background: #000;
    opacity: 0.9;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index:1000
}

.about .products .card-modal__close {
    align-self: start;
    background: none;
    border: none;
    cursor: pointer;
    transition: stroke 150ms;
    position: absolute;
    top: 40px;
    right:40px
}

.about .products .card-modal__close:hover path {
    stroke:#fff
}

.about .products .card-modal__close:focus-visible {
    outline: 5px auto Highlight;
    outline:5px auto -webkit-focus-ring-color
}

.about .products .card-modal__icon {
    margin-left: -2.4545454545rem;
    width: 200px;
    height: 200px;
    max-width: none;
    mix-blend-mode:screen
}

@media only screen and (min-width: 1081px) {
    .about .products .card-modal__name, .about .products .card-modal__description {
        font-style: normal;
        font-weight: 300;
        font-size: 1.3636363636rem;
        line-height: 115%;
        letter-spacing:0.01em
    }
}

.about .products .card-modal__name {
    color: var(--accent-color);
    margin-block-end:1rem
}

.about .testimonials {
    margin-block-end:10rem
}

.about .testimonials__wrapper {
    background-color: var(--bg-color);
    padding: 1rem 1.5rem;
    transition:background-color 150ms
}

@media only screen and (min-width: 721px) {
    .about .testimonials__wrapper {
        padding:2rem 1.5rem 5rem
    }
}

@media only screen and (min-width: 1081px) {
    .about .testimonials__wrapper {
        padding: 2rem 2rem 5rem 2rem
    }
}

.about .testimonials__wrapper [role="tablist"] {
    display: flex;
    gap: 1rem;
    margin-block-end:5rem
}

@media only screen and (min-width: 721px) {
    .about .testimonials__wrapper [role="tablist"] {
        margin-block-end: 10rem
    }
}

.about .testimonials__wrapper button[role="tab"] {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    opacity: 30%;
    transition: opacity 150ms
}

.about .testimonials__wrapper button[role="tab"][aria-selected="true"], .about .testimonials__wrapper button[role="tab"]:hover {
    opacity:100%
}

.about .testimonials__quotes-wrapper {
    display:flex
}

.about .testimonials__quote {
    display: grid;
    gap: 2rem;
    letter-spacing: -0.03em;
    line-height: 110%;
    margin-right: -100%;
    visibility: hidden;
    width:100%
}

@media only screen and (min-width: 721px) {
    .about .testimonials__quote {
        grid-template-columns:10ch 1fr
    }
}

@media only screen and (min-width: 1081px) {
    .about .testimonials__quote {
        gap: 4rem;
        grid-template-columns:15ch 1fr
    }
}

.about .testimonials__quote.active {
    visibility:visible
}

.about .testimonials__quote blockquote, .about .testimonials__quote p {
    margin:0
}

.about .testimonials__quote blockquote {
    font-style: normal;
    font-weight: 300;
    font-size: 1.3636363636rem;
    line-height: 115%;
    letter-spacing: 0.01em;
    font-size: 1.1818181818rem;
    line-height: 110%;
    position:relative
}

@media only screen and (min-width: 721px) {
    .about .testimonials__quote blockquote {
        font-weight: 300;
        grid-column: 2;
        grid-row:1
    }
}

@media only screen and (min-width: 1081px) {
    .about .testimonials__quote blockquote {
        font-style: normal;
        font-weight: 300;
        font-size: 2.8181818182rem;
        line-height: 1;
        letter-spacing: -0.035em;
        max-width:25ch
    }
}

.about .testimonials__quote blockquote:before {
    content: '\201C';
    position: absolute;
    left:-0.5em
}

.about .testimonials__quote blockquote:after {
    content: '\201D';
    position: relative;
    left:-0.1em
}

.about .testimonials__quote figcaption {
    display: flex;
    flex-direction: column;
    font-size: .6363636364rem;
    line-height:115%
}

@media only screen and (min-width: 721px) {
    .about .testimonials__quote figcaption {
        grid-column: 1;
        grid-row: 1;
        margin-block-start:0.2rem
    }
}

@media only screen and (min-width: 1081px) {
    .about .testimonials__quote figcaption {
        font-style: normal;
        font-weight: 400;
        font-size: 1rem;
        line-height: 115%;
        letter-spacing: 0.01em;
        gap: 1rem;
        margin-block-start:0.5rem
    }
}

.contact__marquee {
    width: 100%;
    padding-bottom: 50%;
    margin-bottom: 2.4545454545rem;
    background-size: auto 100%;
    background-repeat: repeat-x;
    background-position: 0 0;
    background-color:#1a1715
}

@media only screen and (max-width: 1080px) {
    .contact__marquee {
        padding-bottom:66.6666666667%
    }
}

.contact__section.col {
    width:100%
}

@media only screen and (min-width: 1081px) {
    .contact__section.col {
        width:50%
    }
}

.contact__subsection.col {
    width: 100%;
    position: relative;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-direction: normal;
    -webkit-box-orient: vertical;
    -webkit-flex-direction: column;
    -moz-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction:column
}

@media only screen and (min-width: 721px) {
    .contact__subsection.col {
        width:50%
    }
}

.contact__subsection {
    margin-bottom:1.2272727273rem
}

.contact__copyright {
    position: absolute;
    bottom:0
}

.clock {
    display: block;
    width: 173px;
    margin-top: 1.6363632273rem;
    margin-bottom:1.2272727273rem
}

.analog-face, .analog-hour, .analog-min, .analog-sec {
    stroke-width: 1px;
    stroke:#3c3a35
}

.analog-sec {
    stroke:#ff3000
}

.digital-face {
    stroke-width: 1px;
    stroke:#3c3a35
}

.digital-display {
    font-family: 'HelveticaNeueUltraLight', 'HelveticaNeue-UltraLight', 'Helvetica Neue UltraLight', 'Helvetica Neue', sans-serif;
    font-weight: 100;
    -moz-osx-font-smoothing: auto;
    -webkit-font-smoothing: subpixel-antialiased;
    fill: #776b62;
    font-size: 24px;
    pointer-events: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select:none
}

.digital-colon {
    fill: #ff3000;
    -webkit-animation: blink 1s infinite;
    -o-animation: blink 1s infinite;
    animation:blink 1s infinite
}

@-webkit-keyframes blink {
    0%, 49%, 100% {
        fill-opacity:1
    }

    50%, 100% {
        fill-opacity:0
    }
}

@-moz-keyframes blink {
    0%, 49%, 100% {
        fill-opacity:1
    }

    50%, 100% {
        fill-opacity:0
    }
}

@-ms-keyframes blink {
    0%, 49%, 100% {
        fill-opacity:1
    }

    50%, 100% {
        fill-opacity:0
    }
}

@-o-keyframes blink {
    0%, 49%, 100% {
        fill-opacity:1
    }

    50%, 100% {
        fill-opacity:0
    }
}

@keyframes blink {
    0%, 49%, 100% {
        fill-opacity:1
    }

    50%, 100% {
        fill-opacity:0
    }
}

.jobs__header {
    margin-bottom:3.6818181818rem
}

.jobs__header__section.col {
    width:100%
}

@media only screen and (min-width: 1081px) {
    .jobs__header__section.col {
        width:50%
    }
}

.jobs__header__section--intro > * {
    max-width:18.5rem
}

.job-cards.row {
    -webkit-box-align: stretch;
    -ms-flex-align: stretch;
    -webkit-align-items: stretch;
    -moz-align-items: stretch;
    align-items:stretch
}

.job-card {
    margin-bottom:1.2272727273rem
}

.job-card.col {
    width:100%
}

@media only screen and (min-width: 1081px) {
    .job-card.col {
        width:50%
    }
}

.job-card__link {
    display: block;
    position: relative;
    color: #776b62;
    background-color:#1a1715
}

@media only screen and (min-width: 1081px) and(max-width: 1440px) {
    .job-card__link {
        height: 100%;
        overflow:hidden
    }
}

@media only screen and (min-width: 1441px) {
    .job-card__link {
        overflow: hidden;
        padding-bottom:66.6666666667%
    }
}

.job-card__text {
    padding: 1.2272727273rem;
    max-width: 22rem;
    box-sizing: border-box;
    height: 100%;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-direction: normal;
    -webkit-box-orient: vertical;
    -webkit-flex-direction: column;
    -moz-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    -webkit-justify-content: space-between;
    -moz-justify-content: space-between;
    justify-content:space-between
}

@media only screen and (min-width: 1441px) {
    .job-card__text {
        position:absolute
    }
}

.job-card__more {
    display: inline-block;
    margin-top:1.2272727273rem
}

.job-card__link:hover .job-card__more {
    color: #fff;
    border-bottom-color:#fff
}

.job__article.col {
    width:100%
}

@media only screen and (min-width: 1081px) {
    .job__article.col {
        width:66.6666666667%
    }
}

.job__aside.col {
    width:100%
}

@media only screen and (min-width: 1081px) {
    .job__aside.col {
        width:33.3333333333%
    }
}

.job__article {
    margin-bottom:3.6818181818rem
}

@media only screen and (min-width: 1081px) {
    .job__article {
        margin-bottom:0
    }
}

.job__aside__others {
    margin-top:3.6818181818rem
}

.job__aside__other {
    margin-bottom:.9204545455rem
}

.job__aside__other:last-of-type {
    margin-bottom:0
}

.job__aside__other__link {
    color: #776b62;
    -webkit-transition: color 150ms;
    -o-transition: color 150ms;
    transition:color 150ms
}

.job__aside__other__link:hover {
    color:#fff
}

.job__aside__other__link--active {
    color:#fff
}

@media only screen and (min-width: 1081px) {
    .filter__title {
        font-size: 1rem;
        font-weight: 400;
        margin-bottom:auto
    }
}

.filter, .static-filter {
    cursor: pointer;
    padding-top: 0;
    padding-bottom: 1.2272727273rem;
    display:inline-block
}

@media only screen and (max-width: 720px) {
    .filter, .static-filter {
        display:block
    }
}

.filter__separator {
    display: none;
    margin-left: .75rem;
    margin-right:.75rem
}

@media only screen and (min-width: 1081px) {
    .filter__separator {
        display:inline-block
    }
}

.filter__separator:after {
    content: '';
    display: inline-block;
    background-color: #fff;
    width: 1.25rem;
    height: 1px;
    vertical-align:middle
}

.filter__selected {
    z-index: -1;
    position: absolute;
    visibility: hidden;
    display:none
}

.static-filter .filter__selected {
    position: static;
    visibility:visible
}

.filter__items {
    margin-bottom: 0;
    display:inline
}

@media only screen and (max-width: 1080px) {
    .filter__items {
        display: none;
        height:0
    }

    .filter--hover .filter__items, body.index .filter__items {
        height:auto
    }
}

.filter__item {
    display: inline-block;
    color: #776b62;
    max-width: 0;
    -webkit-transition: color 150ms, max-width 400ms, opacity 600ms;
    -o-transition: color 150ms, max-width 400ms, opacity 600ms;
    transition:color 150ms, max-width 400ms, opacity 600ms
}

.filter__item:hover {
    color:#fff
}

.filter--hover .filter__item, body.index .filter__item {
    max-width:12rem
}

.filter__item:not(.filter__item--active) {
    opacity:0
}

.filter--hover .filter__item:not(.filter__item--active), body.index .filter__item:not(.filter__item--active) {
    opacity:1
}

@media only screen and (max-width: 720px) {
    .filter__item {
        width: auto;
        display: block;
        visibility: hidden;
        opacity:0
    }

    .filter__item:nth-of-type(1) {
        -webkit-transition: color 150ms, opacity 300ms .01s;
        -o-transition: color 150ms, opacity 300ms .01s;
        transition:color 150ms, opacity 300ms .01s
    }

    .filter__item:nth-of-type(2) {
        -webkit-transition: color 150ms, opacity 300ms .02s;
        -o-transition: color 150ms, opacity 300ms .02s;
        transition:color 150ms, opacity 300ms .02s
    }

    .filter__item:nth-of-type(3) {
        -webkit-transition: color 150ms, opacity 300ms .03s;
        -o-transition: color 150ms, opacity 300ms .03s;
        transition:color 150ms, opacity 300ms .03s
    }

    .filter__item:nth-of-type(4) {
        -webkit-transition: color 150ms, opacity 300ms .04s;
        -o-transition: color 150ms, opacity 300ms .04s;
        transition:color 150ms, opacity 300ms .04s
    }

    .filter__item:nth-of-type(5) {
        -webkit-transition: color 150ms, opacity 300ms .05s;
        -o-transition: color 150ms, opacity 300ms .05s;
        transition:color 150ms, opacity 300ms .05s
    }

    .filter__item:nth-of-type(6) {
        -webkit-transition: color 150ms, opacity 300ms .06s;
        -o-transition: color 150ms, opacity 300ms .06s;
        transition:color 150ms, opacity 300ms .06s
    }

    .filter__item:nth-of-type(7) {
        -webkit-transition: color 150ms, opacity 300ms .07s;
        -o-transition: color 150ms, opacity 300ms .07s;
        transition:color 150ms, opacity 300ms .07s
    }

    .filter__item:nth-of-type(8) {
        -webkit-transition: color 150ms, opacity 300ms .08s;
        -o-transition: color 150ms, opacity 300ms .08s;
        transition:color 150ms, opacity 300ms .08s
    }

    .filter__item:nth-of-type(9) {
        -webkit-transition: color 150ms, opacity 300ms .09s;
        -o-transition: color 150ms, opacity 300ms .09s;
        transition:color 150ms, opacity 300ms .09s
    }

    .filter__item:nth-of-type(10) {
        -webkit-transition: color 150ms, opacity 300ms .1s;
        -o-transition: color 150ms, opacity 300ms .1s;
        transition:color 150ms, opacity 300ms .1s
    }

    .filter__item:nth-of-type(11) {
        -webkit-transition: color 150ms, opacity 300ms .11s;
        -o-transition: color 150ms, opacity 300ms .11s;
        transition:color 150ms, opacity 300ms .11s
    }

    .filter__item:nth-of-type(12) {
        -webkit-transition: color 150ms, opacity 300ms .12s;
        -o-transition: color 150ms, opacity 300ms .12s;
        transition:color 150ms, opacity 300ms .12s
    }

    .filter--hover .filter__item, body.index .filter__item {
        visibility: visible;
        opacity:1
    }
}

.filter__item--active {
    color:#fff
}

.filter__link {
    white-space: nowrap;
    margin-right:1rem
}

@media only screen and (max-width: 720px) {
    .filter__link {
        display: block;
        padding-top: .6136363636rem;
        box-sizing:border-box
    }
}

.white {
    color:#fff
}

.mb0, .contact__subsection.col h4 {
    margin-bottom:0
}

.mb0-wrap > * :last-child {
    margin-bottom:0
}

.unpublished:after {
    content: ' (Hidden)'
}

.draft:after {
    content: ' (Draft)'
}

.future:after {
    content: ' (Future)'
}

.hidden {
    display:none
}

.no-scroll {
    overflow-y:hidden
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border:0
}

::selection {
    background-color: #ff3000;
    color: #fff;
    color:rgba(0, 0, 0, 0.666667)
}

::-moz-selection {
    background-color: #ff3000;
    color: #fff;
    color: rgba(0, 0, 0, 0.666667)
}

body[data-hl="1"] ::selection {
    background-color: #ff3000;
    color: #fff;
    color: rgba(0, 0, 0, 0.666667)
}

body[data-hl="1"] ::-moz-selection {
    background-color: #ff3000;
    color: #fff;
    color: rgba(0, 0, 0, 0.666667)
}

body[data-hl="2"] ::selection {
    background-color: #fff300;
    color: #fff;
    color: rgba(0, 0, 0, 0.666667)
}

body[data-hl="2"] ::-moz-selection {
    background-color: #fff300;
    color: #fff;
    color: rgba(0, 0, 0, 0.666667)
}

body[data-hl="3"] ::selection {
    background-color: #00ff1c;
    color: #fff;
    color: rgba(0, 0, 0, 0.666667)
}

body[data-hl="3"] ::-moz-selection {
    background-color: #00ff1c;
    color: #fff;
    color: rgba(0, 0, 0, 0.666667)
}

body[data-hl="4"] ::selection {
    background-color: #0032ff;
    color: #fff;
    color: rgba(0, 0, 0, 0.666667)
}

body[data-hl="4"] ::-moz-selection {
    background-color: #0032ff;
    color: #fff;
    color: rgba(0, 0, 0, 0.666667)
}

body[data-hl="5"] ::selection {
    background-color: #f0f;
    color: #fff;
    color: rgba(0, 0, 0, 0.666667)
}

body[data-hl="5"] ::-moz-selection {
    background-color: #f0f;
    color: #fff;
    color: rgba(0, 0, 0, 0.666667)
}

.section {
    display: flexbox; 
  }
  
  .section__title {
    position: absolute;
    left: 1rem; 
  }
  
  .section__content {
    display: grid;
    padding-left: 34%; 
    padding-bottom: 4%;
    margin-right:1rem;
  }
  
  .section__content a {
    text-decoration: underline !important;
  }
  
  .section__content em {
    font-style: italic !important;
  }

@media (max-width: 768px) {
    .section {
        flex-direction: column;
    }

    .section__title {
        position: static;
        text-align: left; /* Center the title */
    }

    .section__content {
        padding-left: 0; /* Remove left padding */
        margin-bottom: 5rem;
    }
}